<!--
 * @Author: ITDLCL
 * @Date: 2024-11-12 17:41:55
 * @LastEditors: ITDLCL
 * @Description: 停车缴费
-->
<template>
  <view class="park">
    <PageWarpper page-name="输入车牌，畅享会员优惠">
      <template v-slot:main>
        <LicensePlate :license-number="licenseNumber" :option-name="optionName" />
        <Menus :list="menuList" :gap-number="4" @btnClick="btnClick()" />
        <view
          class="warning d-flex"
          v-if="!queryStep"
          @click="openPage('/pages/personal/agreement?source_type=park')"
        >
          <van-icon name="warning-o" size="12px" color="#000000" />
          <text>停车场说明</text>
        </view>
        <button v-else class="black-btn">未找到停车信息</button>
      </template>
    </PageWarpper>
    <SoftKeyboard :license-number="licenseNumber" @keyClick="inputWord" />
  </view>
</template>

<script setup>
import { ref } from "vue";
import PageWarpper from "@/components/Layer/PageWarpper.vue";
import LicensePlate from "@/components/Input/LicensePlate.vue";
import SoftKeyboard from "@/components/Input/SoftKeyboard.vue";
import Menus from "@/components/List/Menus.vue";
import { openPage } from "@/util/index.js";

let menuList = ref([
  {
    name: "停车缴费",
    es_name: "Pay",
    path: "",
  },
  {
    name: "缴费记录",
    es_name: "Record",
    path: "/park/record",
  },
]);

let queryStep = ref(0);
let licenseNumber = ref("");
let optionName = ref("add");
// 根据车牌号查询缴费信息
let btnClick = () => {
  // 查询车牌号是否正确
  uni.navigateTo({
    url: "/park/confirmpay",
  });
};

// 处理输入
let inputWord = (type, word) => {
  optionName.value = type;
  if (type == "add") {
    licenseNumber.value = licenseNumber.value + word;
    return;
  }
  // 删除
  licenseNumber.value = licenseNumber.value.slice(0, licenseNumber.value.length - 1);
};
</script>

<style lang="scss" scoped>
.park {
  padding-bottom: 200px;
}
.warning {
  margin-top: 110rpx;
  align-items: center;
  justify-content: center;
  text {
    font-size: 20rpx;
    margin-left: 8rpx;
  }
}

.black-btn {
  width: 304rpx;
  height: 68rpx;
  margin-top: 68rpx;
  line-height: 68rpx;
}
</style>
